import QtQuick
import QtQuick.Window

Rectangle {
    
    id: root

    required property string innerText

    property color borderColor: "skyblue"

    property string hoverColor: "transparent"

    property string normalColor: "transparent"

    property int transitionTime: 100

    property bool openAnim: false

    property int radiusSize

    border {
        width: 2
        color: root.borderColor
    }

    radius: radiusSize

    implicitWidth: label.implicitWidth * 10
    implicitHeight: label.implicitHeight * 3

    Text {
        id: label
        anchors.centerIn: parent
        text: root.innerText
    }

    MouseArea {
        id: mouseArea

        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor

        onEntered: bgFadeAnim(root.hoverColor)

        onExited: bgFadeAnim(root.normalColor)


        function bgFadeAnim(targetColor) {
            if (root.hoverColor === root.normalColor || !root.openAnim) {
                return;
            }

            colorAnim.stop();
            colorAnim.to = targetColor;
            colorAnim.start();
        }
    }

    ColorAnimation {
        id: colorAnim
        target: root
        property: "color"
        duration: root.transitionTime
    }
}
